import React, { useEffect, useState } from "react";
import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";
import { Button, Modal, Form, Radio, Input, Upload, Select } from "antd";
import { add } from "../../services/student";
import { url } from "../../services";
import { find } from "../../services/class";
function Add(props) {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [form] = Form.useForm();
    const [loading, setLoading] = useState(false);
    const [imageUrl, setImageUrl] = useState();
    const [classes,setClasses] = useState([]);
    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleOk = async () => {
        try {
            let values = await form.validateFields();
            await add({ ...values, headImg: imageUrl });
            props.show();
            setIsModalOpen(false);
        } catch (e) {
            console.log("验证失败", e);
        }
    };
    const handleChange = (info) => {
        if (info.file.status === "uploading") {
            setLoading(true);
            return;
        }
        if (info.file.status === "done") {
            // Get this url from response in real world.
            // getBase64(info.file.originFileObj, (url) => {
            //     setLoading(false);
            //     setImageUrl(url);
            // });
            setImageUrl(info.file.response.filename);
            console.log("info.file", info.file);
        }
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    useEffect(() => {
        if(isModalOpen){
            const fetchClasses = async () => {
                let data = await find();
                setClasses(data.map(item => ({label:item.name,value:item._id})));
            };
            fetchClasses();
        }
    },[isModalOpen]);
    const uploadButton = (
        <div>
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
            <div
                style={{
                    marginTop: 8,
                }}
            >
                Upload
            </div>
        </div>
    );
    return (
        <div>
            <Button type="primary" onClick={showModal}>
                增加
            </Button>
            <Modal
                title="增加"
                open={isModalOpen}
                onOk={handleOk}
                onCancel={handleCancel}
            >
                <Form
                    form={form}
                    name="add"
                    labelCol={{
                        span: 4,
                    }}
                    wrapperCol={{
                        span: 20,
                    }}
                    autoComplete="off"
                >
                    <Form.Item label="上传">
                        <Upload
                            name="file"
                            listType="picture-card"
                            className="avatar-uploader"
                            showUploadList={false}
                            action={url + "/upload"}
                            onChange={handleChange}
                        >
                            {imageUrl ? (
                                <img
                                    src={url + "/images/" + imageUrl}
                                    alt="avatar"
                                    style={{
                                        width: "100%",
                                    }}
                                />
                            ) : (
                                uploadButton
                            )}
                        </Upload>
                    </Form.Item>
                    <Form.Item
                        label="姓名"
                        name="name"
                        hasFeedback
                        rules={[
                            {
                                required: true,
                                message: "请输入姓名",
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="年龄"
                        name="age"
                        hasFeedback
                        rules={[
                            {
                                required: true,
                                message: "请输入年龄",
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item label="性别" name="gender">
                        <Radio.Group>
                            <Radio value="男">男</Radio>
                            <Radio value="女">女</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label="选择班级" name="classes">
                        <Select
                            style={{ width: 120 }}
                            options={classes}
                        />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
}
export default Add;
